<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- jqGrid组件基础样式包-必要 -->
    <link rel="stylesheet" href="/lib/jqgrid/css/ui.jqgrid.css" />
    <link rel="stylesheet" href="/lib/bootstrap-3.3.7/bootstrap.min.css" />
    <link  href="/lib/jquery-ui-timepicker-addon.min.css" rel="stylesheet"/>
    <!-- jqGrid主题包-非必要 -->
    <!-- 在jqgrid/css/css这个目录下还有其他的主题包，可以尝试更换看效果 -->
    <link rel="stylesheet" href="/lib/jqgrid/css/css/redmond/jquery-ui-1.8.16.custom.css" />
    <!-- jquery插件包-必要 -->
    <!-- 这个是所有jquery插件的基础，首先第一个引入 -->
    <script src="lib/jquery-1.7.2.min.js"></script>
    <script src="lib/jquery-ui-1.8.20.custom.min.js"></script>
    <script type="text/javascript" src="/lib/jquery-ui-timepicker-addon.min.js"></script>
    <script type="text/javascript" src="/lib/timepicker_CN.js"></script>

    <!--<script src="https://cdn.bootcss.com/datepicker/0.5.4/i18n/datepicker.zh-CN.js"></script>-->
    <!-- jqGrid插件包-必要 -->
    <script type="text/javascript" src="/lib/jqgrid/js/jquery.jqGrid.src.js"></script>
    <!-- 在jqgrid/js/i18n下还有其他的多语言包，可以尝试更换看效果 -->
    <script type="text/javascript" src="/lib/jqgrid/js/i18n/grid.locale-cn.js"></script>

    <title>数据列表</title>
    <style type="text/css">
        *{
            margin:0px;
            padding: 0px;
        }
        .header{
            width: 100%;
            height: 50px;
            line-height: 50px;
            background-color: #000000;
            position: relative;
        }
        .header .nav1 {
            position: absolute;
            left: 50%;
            margin-left: -300px;
        }
        .header .nav1 li{
            list-style: none;
            min-width: 20px;
            padding: 0px 20px;
            color: #ffffff;
            background-color: #000000;
            float: left;
            cursor: pointer;
        }
    </style>
    <div class="header">
        <ul class="nav1">
            <li><a href="/listPage">数据列表</a></li>
            <li><a href="/echarts">数据统计</a></li>
            <li><a href="/alarm">报警信息</a></li>
        </ul>
    </div>
    <div class="row">
        <div class="col-sm-20">
            <form id="formSearch" class="form-horizontal">
                <div class="form-group" style="margin-top:15px">
                    <label class="control-label col-sm-1" style="margin-left: 0px;" >编号</label>
                    <div class="col-sm-1">
                        <input type="text" class="form-control" id="id" name="id">
                    </div>
                    <label class="control-label col-sm-1" style="margin-left: 0px;" for="startTime">开始时间</label>
                    <div class="col-sm-2">
                        <input type="text" readonly= "readonly" class="form-control" id="startTime">
                    </div>
                    <label class="control-label col-sm-1" style="margin-left: 0px;" for="endTime">结束时间</label>
                    <div class="col-sm-2">
                        <input type="text" readonly= "readonly" class="form-control" id="endTime">
                    </div>
                    <label class="control-label col-sm-1" style="margin-left: 0px;" >报警</label>
                    <div class="col-sm-2">
                        <select id="alarmType" class="form-control" name="alarmType">
                            <option>请选择</option>
                            <option value="1">报警类型</option>
                            <option value="2">自检类型</option>
                        </select>
                    </div>

                    <button type="button" value="查询" id="searchBtn" >查询</button>
                </div>

            </form>
        </div>
    </div>
</head>

    <body>
        <table id="list2"></table>
        <div id="pager2"></div>
        <br/>
        <label>能量计最新数据</label>
        <table id="listlastest"></table>
        <div id="pagerlastest"></div>
    </body>
    <!-- 本页面初始化用到的js包，创建jqGrid的代码就在里面 -->
    <script type="text/javascript" src="js/packetList.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#startTime').datetimepicker({
                autoclose: true,
                todayHighlight: true,
                showSecond: true,
                dateFormat: 'yy-mm-dd',
                timeFormat: 'hh:mm:ss'
            });
            $('#endTime').datetimepicker({
                autoclose: true,
                todayHighlight: true,
                showSecond: true,
                dateFormat: 'yy-mm-dd',
                timeFormat: 'hh:mm:ss'
            });
        });
    </script>
</html>
